import { RefreshCw, FileX } from "lucide-react";
import { MemoCard } from "@/components/memo/MemoCard";
import type { Memo } from "@/services/memo.service";

interface MemoListProps {
  memos: Memo[];
  isLoading: boolean;
  error: string;
  onEdit: (memo: Memo) => void;
  onDelete: (id: string) => void;
}

export function MemoList({
  memos,
  isLoading,
  error,
  onEdit,
  onDelete,
}: MemoListProps) {
  if (isLoading) {
    return (
      <div className="flex justify-center py-12">
        <RefreshCw className="w-6 h-6 animate-spin text-primary" />
      </div>
    );
  }

  if (error) {
    return <div className="text-center py-12 text-destructive">{error}</div>;
  }

  if (memos.length === 0) {
    return (
      <div className="text-center py-12 text-muted-foreground">
        <FileX className="w-12 h-12 mx-auto mb-4" />
        <p>暂无笔记</p>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {memos.map((memo) => (
        <MemoCard
          key={memo._id}
          memo={memo}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
}
